<template>
  <div class="right">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-row>
          <el-col :span="18">
            <el-breadcrumb separator-class="el-icon-arrow-right" class="dir">
              <el-breadcrumb-item
                v-for="item in treePath.treeNodePath"
                :key="item.ID"
              >{{ item.label }}</el-breadcrumb-item>
            </el-breadcrumb>
          </el-col>
          <el-col :span="6">
            <div class="file-action">
              <!-- <el-input
                v-model="searchFile"
                placeholder="请输入内容"
                class="input-with-select"
              >
                <el-button slot="append" type="primary">搜索</el-button>
              </el-input> -->
              <div class="file-btn">
                <div
                  v-for="(item, index) in rightBtn"
                  :key="index"
                  class="file-btn-item"
                  :class="index === rightIndex ? 'file-btn-item-active' : ''"
                  @click="handleRightBtn(index)"
                >
                  <i :class="item.icon" />
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div
        class="file-container"
        @contextmenu.prevent="rightClick('', '', $event, 1)"
      >
        <el-scrollbar v-if="rightIndex === 0">
          <div class="file-container-inner">
            <div
              v-for="(item, index) in tableData"
              :key="index"
              v-dragging="{ item: item, list: tableData, group: 'item' }"
              class="file-item-inner"
            >
              <div
                class="file-item"
                @contextmenu.prevent.stop="rightClick(item, '', $event, 2)"
              >
                <div class="file-item-icon">
                  <img :src="item.fullUrl | formatFile" alt="">
                </div>
                <div v-if="!item.open" class="file-item-title">
                  {{ item.name }}
                </div>
                <div v-else class="file-item-title">
                  <el-input
                    v-model="item.name"
                    placeholder="请输入内容"
                    @blur="handleBlur($event, item)"
                  />
                </div>
              </div>
            </div>
          </div>
        </el-scrollbar>
        <el-scrollbar v-else>
          <el-table
            :data="tableData"
            highlight-current-row
            border
            style="width: 100%"
          >
            <el-table-column prop="name" align="center" label="文件名">
              <template slot-scope="scope">
                <span v-if="!scope.row.open" v-text="scope.row.name" />
                <el-input
                  v-else
                  v-model="scope.row.name"
                  placeholder="请输入内容"
                  @blur="handleBlur($event, scope.row)"
                />
              </template>
            </el-table-column>
            <el-table-column prop="createdAt" align="center" label="上传日期">
              <template slot-scope="scope">
                <span
                  v-if="!scope.row.open"
                  v-text="parseTime(scope.row.CreatedAt)"
                />
              </template>
            </el-table-column>
            <el-table-column prop="type" align="center" label="文件类型">
              <template slot-scope="scope">
                <div class="type">
                  <img :src="scope.row.fullUrl | formatFile" alt="">
                  <span v-text="scope.row.type" />
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="size" align="center" label="文件大小">
              <template slot-scope="scope">
                <span v-text="renderSize(scope.row.size)" />
              </template>
            </el-table-column>
            <el-table-column prop="action" align="center" label="操作">
              <template slot-scope="scope">
                <el-dropdown trigger="click">
                  <span class="el-dropdown-link">
                    操作<i class="el-icon-arrow-down el-icon--right" />
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item icon="el-icon-folder-add" @click.native.stop="handleTableAction(scope.row,1)">上传</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-edit" @click.native.stop="handleTableAction(scope.row,2)">重命名</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-folder-delete" @click.native.stop="handleTableAction(scope.row,3)">删除</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-download" @click.native.stop="handleTableAction(scope.row,4)">下载</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
        </el-scrollbar>
        <div class="page">
          <el-pagination
            layout="prev, pager, next, jumper, total"
            prev-text="上一页"
            next-text="下一页"
            :current-page="pageNo"
            :page-size="pageSize"
            :total="total"
            @current-change="handlePage"
          />
        </div>
      </div>
    </el-card>
    <div
      v-show="visible"
      id="perTreeMenu"
      :style="{ ...rightMenu }"
      class="contextmenu"
    >
      <div
        class="right-contextMenu-item contextMenu-item"
        @click="handleAction(1)"
        @mouseover="handleTagsOver(0)"
        @mouseleave="handleTagsLeave(0)"
      >
        <i class="el-icon-folder-add" />
        <span> 上传</span>
      </div>
      <el-divider />
      <div
        v-show="!isBlank"
        class="right-contextMenu-item contextMenu-item"
        @click="handleAction(2)"
        @mouseover="handleTagsOver(1)"
        @mouseleave="handleTagsLeave(1)"
      >
        <i class="el-icon-edit" />
        <span> 重命名</span>
      </div>
      <el-divider />
      <div
        v-show="!isBlank"
        class="right-contextMenu-item contextMenu-item"
        @click="handleAction(3)"
        @mouseover="handleTagsOver(2)"
        @mouseleave="handleTagsLeave(2)"
      >
        <i class="el-icon-folder-delete" />
        <span> 删除</span>
      </div>
      <el-divider />
      <div
        v-show="!isBlank"
        class="right-contextMenu-item contextMenu-item"
        @click="handleAction(4)"
        @mouseover="handleTagsOver(3)"
        @mouseleave="handleTagsLeave(3)"
      >
        <i class="el-icon-download" />
        <span> 下载</span>
      </div>
    </div>
    <upload-dialog
      :show="uploadShow"
      @confirm="handleUploadConfirm"
      @cancel="handleUploadCancel"
    />
  </div>
</template>

<script>
import Sortable from 'sortablejs'
import UploadDialog from '@/components/UploadDialog/index'
import eventBus from '@/utils/eventbus'
// import { parseTime } from '@/utils'
import {
  // sysfileinfo,
  sysfileinfoList,
  sysfileinfoAdd,
  sysfileinfoEdit,
  sysfileinfoDelete
} from '@/api/file'
export default {
  name: 'Right',
  components: {
    UploadDialog
  },
  filters: {
    formatFile(pic) {
      const type = pic.substring(pic.lastIndexOf('.') + 1, pic.length)
      const FileIcons = [
        {
          icon: '',
          matchList: ['bmp', 'jpg', 'png', 'jpeg', 'gif', 'webp']
        },
        {
          icon: require('../../assets/icons/txtbeifen.png'),
          matchList: ['text', 'txt']
        },
        {
          icon: require('../../assets/icons/Zip.png'),
          matchList: ['zip', 'tar', '7z']
        },
        {
          icon: require('../../assets/icons/rar.png'),
          matchList: ['rar']
        },
        {
          icon: require('../../assets/icons/Word.png'),
          matchList: ['doc', 'docx']
        },
        {
          icon: require('../../assets/icons/pptbeifen.png'),
          matchList: ['ppt', 'pptx']
        },
        {
          icon: require('../../assets/icons/Excel.png'),
          matchList: ['xlsx', 'xls']
        },
        {
          icon: require('../../assets/icons/PDFbeifen.png'),
          matchList: ['pdf', 'pdfx']
        },
        {
          icon: require('../../assets/icons/Idea.png'),
          matchList: ['java', 'class', 'jar', 'kt']
        },
        {
          icon: require('../../assets/icons/tubiaozhizuomoban-01.png'),
          matchList: ['psd']
        },
        {
          icon: require('../../assets/icons/tubiaozhizuomoban2-01-01.png'),
          matchList: ['ai']
        },
        {
          icon: require('../../assets/icons/Web.png'),
          matchList: ['ts', 'html', 'css', 'js']
        },
        {
          icon: require('../../assets/icons/video2.png'),
          matchList: ['mp4']
        },
        {
          icon: require('../../assets/icons/voice.png'),
          matchList: ['mp3']
        },
        {
          icon: require('../../assets/icons/AwesomeVue.png'),
          matchList: ['vue']
        },
        {
          icon: require('../../assets/icons/Pycharm.png'),
          matchList: ['py']
        },
        {
          icon: require('../../assets/icons/Phpstorm-01.png'),
          matchList: ['php']
        }
      ]
      const UnknowIcon = require('../../assets/icons/Unknow.png')
      if (FileIcons[0].matchList.includes(type)) {
        return pic
      } else {
        const file = FileIcons.filter(item => item.matchList.includes(type))
        if (file.length > 0) {
          return file[0].icon
        } else {
          return UnknowIcon
        }
      }
    }
  },
  data() {
    return {
      uploadShow: false,
      pageNo: 1,
      pageSize: 50,
      total: 0,
      rightBtn: [
        {
          icon: 'el-icon-s-grid'
        },
        {
          icon: 'ri-table-fill'
        }
      ],
      rightIndex: 0,
      rightData: {},
      tableData: [],
      searchFile: '',
      height: 0,
      visible: false,
      rightMenu: {},
      treePath: {},
      isBlank: false
    }
  },
  mounted() {
    eventBus.$on('treeNodeClick', e => {
      this.treePath = e
      this.getList()
    })
    this.rowDrop()
    this.height = document.querySelector('.layout-right').clientHeight - 107
  },
  destroyed() {
    eventBus.$off('treeNodeClick')
  },
  methods: {
    handlePage(e) {
      this.pageNo = e
      this.getList()
    },
    getList() {
      const pId = this.treePath.currentNode.ID
      if (pId) {
        sysfileinfoList({
          pId,
          pageIndex: this.pageNo,
          pageSize: this.pageSize
        }).then(ret => {
          if (ret.code === 200) {
            this.total = ret.data.count
            this.tableData = ret.data.list.map(item => {
              return {
                ...item,
                open: false
              }
            })
          }
        })
      }
    },
    handleUploadConfirm(e) {
      this.uploadMultiple(e).then(ret => {
        if (ret) {
          this.getList()
        }
      })
      this.uploadShow = false
    },
    uploadMultiple(e) {
      const path = e.map(item => {
        return sysfileinfoAdd({
          type: item.type,
          name: item.name,
          size: `${item.size}`,
          url: item.path,
          fullUrl: item.full_path,
          pId: this.treePath.currentNode.ID
        })
      })
      return Promise.all(path)
    },
    handleUploadCancel() {
      this.uploadShow = false
    },
    handleTableAction(a, b) {
      console.log(typeof b)
      console.log(a)
      this.rightData.currentData = a
      this.handleAction(b)
    },
    handleAction(e) {
      switch (e) {
        case 1:
          this.uploadShow = true
          break
        case 2:
          this.tableData.forEach((item, index) => {
            debugger
            if (item.ID === this.rightData.currentData.ID) {
              this.tableData[index].open = true
            }
          })
          break
        case 3:
          sysfileinfoDelete(this.rightData.currentData.ID).then(ret => {
            if (ret.code === 200) {
              this.getList()
            }
          })
          break
        case 4:
          window.open(this.rightData.currentData.fullUrl)
          break
      }
    },
    handleTagsOver(index) {
      const tags = document.querySelectorAll('.right-contextMenu-item')
      const item = tags[index]
      item.style.cssText = `color:${
        this.$store.state.settings.theme
      };background:${this.$store.state.settings.theme.colorRgb()}`
    },
    handleTagsLeave(index) {
      const tags = document.querySelectorAll('.right-contextMenu-item')
      const item = tags[index]
      item.style.cssText = `color:#606266`
    },
    rightClick(a, b, c, d) {
      c.preventDefault()
      this.rightMenu = { top: c.pageY + 'px', left: c.pageX + 'px' }
      this.visible = true
      if (!a) {
        this.isBlank = true
      } else {
        this.isBlank = false
      }
      this.rightData = {
        currentNode: b,
        currentData: a
      }
      document.onclick = ev => {
        if (ev.target !== document.getElementById('perTreeMenu')) {
          this.visible = false
        }
      }
    },
    handleBlur(a, b) {
      console.log(a, b)
      if (this.tableData.length > 0) {
        this.tableData.forEach(item => {
          item.open = false
        })
        sysfileinfoEdit({
          ...b
        })
      }
    },
    rowDrop() {
      const tbody = document.querySelector('.el-table__body-wrapper tbody')
      if (tbody) {
        const _this = this
        Sortable.create(tbody, {
          onEnd({ newIndex, oldIndex }) {
            const currRow = _this.tableData.splice(oldIndex, 1)[0]
            _this.tableData.splice(newIndex, 0, currRow)
          }
        })
      }
    },
    handleRightBtn(e) {
      this.rightIndex = e
    },
    renderSize(value) {
      if (value === null || value === '') {
        return '0 Bytes'
      }
      const unitArr = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
      let index = 0
      const srcsize = parseFloat(value)
      index = Math.floor(Math.log(srcsize) / Math.log(1024))
      let size = srcsize / Math.pow(1024, index)
      size = size.toFixed(2)
      return size + unitArr[index]
    }
  }
}

// eslint-disable-next-line no-extend-native
String.prototype.colorRgb = function() {
  let sColor = this.toLowerCase()
  const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
  if (sColor && reg.test(sColor)) {
    if (sColor.length === 4) {
      let sColorNew = '#'
      for (let i = 1; i < 4; i += 1) {
        sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1))
      }
      sColor = sColorNew
    }
    const sColorChange = []
    for (let i = 1; i < 7; i += 2) {
      sColorChange.push(parseInt('0x' + sColor.slice(i, i + 2)))
    }
    return 'rgba(' + sColorChange.join(',') + ',0.2)'
  } else {
    return sColor
  }
}
</script>

<style lang="scss" scoped>
.file-btn {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-left: 8px;
  .file-btn-item {
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 3px;
    i {
      font-size: 20px;
      border-color: #ccc;
      color: #8a8a8a;
    }
  }
}
.file-btn-item-active {
  background-color: #e6e6e6;
}
.file-action {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.dir {
  height: 36px;
  line-height: 36px;
}
.file-container /deep/ {
  .el-scrollbar__wrap::-webkit-scrollbar {
    display: none;
  }
  .el-table .cell {
    line-height: 35px;
  }
  .el-table thead {
    tr {
      background-color: #d8e5f0 !important;
    }
  }
  .el-table .el-table__header-wrapper th {
    background-color: transparent;
  }
  .file-item-inner {
    width: 12%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: move;
  }
  .file-container-inner {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
  }
  .file-item {
    width: 130px;
    height: 130px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .file-item-icon {
      margin-bottom: 5px;
      img {
        width: 50px;
        height: 50px;
      }
    }
    .file-item-title {
      word-break: break-all;
      font-size: 14px;
      line-height: 20px;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 60%;
    }
    &:active {
      background-color: #f0f1f5;
    }
  }
  .el-scrollbar {
    height: calc(100vh - 280px);
  }
  .page {
    height: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.right {
  height: 100%;
  .el-card {
    height: 100%;
  }
}
.file {
  position: relative;
}

.contextmenu {
  background: #fff;
  z-index: 3000;
  position: fixed;
  list-style-type: none;
  border-radius: 4px;
  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.1), 0 1px 7px 0 rgba(0, 0, 0, 0.1);
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  .el-divider--horizontal {
    margin: 0;
  }
  .contextMenu-item {
    height: 46px;
    cursor: pointer;
    line-height: 46px;
    width: 180px;
    padding: 0 0 0 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: #333;
    span {
      margin-left: 6px;
      font-size: 14.3px;
    }
    //&:hover {
    //  color: currentColor;
    //  background: currentColor;
    //}
  }
}

.type {
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    width: 20px;
    height: 20px;
    margin-right: 5px;
  }
}
</style>
